<template>
	<view class="footer">
		<uni-row class="demo-uni-row">
		    <uni-col :span="5">
		        <view class="demo-uni-col dark"  @click="selected='index'">
					<image v-if="selected==='index'" src="../../static/party_building/assets/icon/indexChecked.png" ></image>
					<image v-else src="../../static/party_building/assets/icon/index.png" ></image>
					<p :class="selected==='index'?'selectedP':''">首页</p>
				</view>
		    </uni-col>
		    <uni-col :span="5">
					<uni-badge v-if="task>0" 
					style="position: absolute;z-index: 1;margin-left: 12%;"  :text="task" type="warning">
					</uni-badge>
		        <view class="demo-uni-col dark"   @click="selected='message'">
					<image v-if="selected==='message'" src="../../static/party_building/assets/icon/partyCommitteeChecked.png" ></image>
					<image v-else src="../../static/party_building/assets/icon/partyCommittee.png" ></image>
					<p :class="selected==='message'?'selectedP':''">任务</p>
				</view>
		    </uni-col>
		    <uni-col :span="5">
		        <view class="demo-uni-col dark"  @click="selected='hall'">
					<image v-if="selected==='hall'"  src="../../static/party_building/assets/icon/branchEFrontChecked.png" ></image>
					<image v-else src="../../static/party_building/assets/icon/branchEFront.png" ></image>
					<p :class="selected==='hall'?'selectedP':''">服务大厅</p>
				</view>
		    </uni-col>
		    <uni-col :span="5">
		        <view class="demo-uni-col dark"  @click="selected='ibm'">
					<image v-if="selected==='ibm'"  src="../../static/party_building/assets/icon/branchEFrontChecked.png" ></image>
					<image v-else src="../../static/party_building/assets/icon/branchEFront.png" ></image>
					<p :class="selected==='ibm'?'selectedP':''">BIM 展厅</p>
				</view>
		    </uni-col>
		    <uni-col :span="5">
		        <view class="demo-uni-col dark"  @click="selected='mine'">
					<image v-if="selected==='mine'"  src="../../static/party_building/assets/icon/mineChecked.png" ></image>
					<image v-else src="../../static/party_building/assets/icon/mine.png" ></image>
					<p :class="selected==='mine'?'selectedP':''">我的</p>
				</view>
		    </uni-col>
		</uni-row>
	</view>
</template>

<script>
	import {getUndoTask} from '@/api/api_footer.js'
	export default{
		 props: {
				isSelected:"",
			 },
		data(){
			return {
				selected:this.isSelected,
				task:0
			}
		},watch: {
			selected:function(val,oval){
				switch (val) {
					case "index":
						uni.redirectTo({
							url:"../index/index"
						});
						break;
					case "message":
						uni.redirectTo({
							// url:"../service/service"
							url:"../task/task"
						});
						break;
					case "hall":
						uni.redirectTo({
							// url:"../branchEFront/branchEFront"
							url:"../hall/hall"
						});
						break;
					case "ibm":
						uni.redirectTo({
							// url:"../branchEFront/branchEFront"
							url:"../ibm/ibm"
						});
						break;
					case "mine":
						uni.redirectTo({
							url:"../mine/mine"
						});
						break;
				}
			}
		},mounted() {
			getUndoTask().then(res=>{
				this.task = res
			})
		}
	}
</script>

<style lang="scss" scoped>
	.footer{
		height: 120upx;
		position: relative;
		width: 100%;
		position: fixed;
		bottom: 0px;
		/deep/ .demo-uni-row{
			height: 120upx;
			background-color: #eaeaea;
			/deep/ .uni-col{
				height: 100%;
			}
			uni-image{
				width: 24px;
				height: 24px;
				margin-top:20upx;
			}
		} 
		.uni-col-5{
			height: 100%;
			width: 20%!important;
			uni-view{
				height: 100%;
				text-align: center;
				color: rgb(161, 161, 161);
				.selectedP{
					color: rgb(243, 41, 41) !important;
				}
			}
		}
	}
</style>
